<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="../vue.js"></script>
  <style>
    *{
        font-size: 30px;
    }
  </style>
</head>
<body>
<div id="app">

  <h1>{{msg}}</h1>
<!--  没有任何设置的情况下会存在事件冒泡-->
  <div @click="fn1">
    outer1
    <div @click="fn2">
      inner1
    </div>
  </div>
<!--阻止冒泡行为stop-->
  <div @click="fn1">
    outer2
    <div @click.stop="fn2">
      inner2
    </div>
  </div>
<!--  一些元素存在默认行为例如图片右键点击打开菜单-->
  <div style="width: 300px;height: 200px;"><img @contextmenu.prevent="" src="../img/桌面4.jpg" alt="..." style="width: 100%;height: 100%"></div>
<!--事件捕获提高事件优先级:capture-->
  <hr>
  <div @click.capture="fn1">
    outer3
    <div @click="fn2">
      inner3
    </div>
  </div>
  <hr>
<!--  键盘事件-->
  <input type="text" @keyup="write" v-model="valueIpt"/>
<!--  当敲下回车的时候执行-->
  <input type="text" @keyup.13="write" v-model="valueIpt"/>

</div>

<script>
  Vue.config.productionTip = false;
  const vm = new Vue({
    el:'#app',
    data(){
      return{
        msg:'hello Vue~~~',
        valueIpt:'我是基础的值'
      }
    },
    methods:{
      fn1(){
        console.log('outer')
      },
      fn2(){
        console.log('inner')
      },
      write(){
        console.log(this.valueIpt)
      }
    }
  })
</script>

</body>
</html>